<template>
  <wd-navbar
  style="
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  z-index: 9999;
  "
  title="今日拼团" left-text="" left-arrow @click="backpath">
    <template #right>
      <wd-icon name="search" size="18" />
    </template>
  </wd-navbar>
  <div>
    <wd-swiper
      :list="videoList"
      autoplay
      :indicator="false"
      indicator-position="bottom-right"
    ></wd-swiper>
  </div>
  <div class="biaoti">
    <wd-steps :active="0" align-center class="custom-class">
      <wd-step title="发起拼团" status="progress" />
      <wd-step title="邀请参与" />
      <wd-step title="人满发货" />
    </wd-steps>
  </div>
  <div>
    <view
      class="content"
      v-for="i in list
        .filter((i) => i.discount !== 0)
        .slice(0, rexiaohaohuo_num)"
      :key="i.id"
    >
      <view class="one">
        <div class="img_src"  @click="goShop(i)">
          <img :src="i.img" alt="" style="width: 100%; height: 100%"/>
        </div>
        <div class="shop_con">
          <div class="" style="width: 90%; color: gray">
            {{ i.name }}
          </div>
          <div>
            <button
              style="
                background-color: aliceblue;
                color: #d81e06;
                display: inline-block;
                border-radius: 100rpx;
                height: 40rpx;
                line-height: 40rpx;
                margin: 10rpx 0;
              "
            >
              好货上心
            </button>
          </div>
          <div>
            <button
              style="
                background-color: #d81e06;
                color: aliceblue;
                display: inline-block;
                border-radius: 15rpx;
                height: 40rpx;
                line-height: 40rpx;
              "
            >
              已省{{ parseFloat(i.price - i.price * i.discount).toFixed(2) }}元
            </button>
          </div>
          <div
            style="display: flex; justify-content: space-between; width: 95%"
          >
            <div>
              <span
                style="color: #d81e06; font-size: 45rpx; margin-right: 15rpx"
                >$25</span
              >
              <span
                style="
                  color: gray;
                  font-size: 35rpx;
                  text-decoration: line-through;
                "
                >$15</span
              >
            </div>
            <div>
              <wd-button type="error" size="small" @click="addcart(i)">加入购物车</wd-button>
            </div>
          </div>
        </div>
      </view>
    </view>
    <wd-loadmore :state="rexiaohaohuo_state" @reload="loadmore" />
  </div>
  <div>
    <BottomShopCar />
  </div>
</template>

<script setup lang="ts">
import BottomShopCar from '../../../../components/BottonShopCar.vue';
import { ref } from 'vue';
const videoList = ref([
  'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
  'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4',
  'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
]);

import {useNowShopStore} from "@/store/now_shop"
const nowShopStore = useNowShopStore()
function  goShop(an:any){
	// console.log(an)
	nowShopStore.setShop(an)
	uni.navigateTo({
	  url: "/pages/TypePages/shop_main/shop_main" // 跳转到对应路径的页面
	});
	
}
const active = ref<number>(0);
  import { addshopcar } from '@/utils/api';
import { useshopcar } from '@/store/shopcar.ts'; //获取store
const shopcar = useshopcar();
const { shopcarlist } = storeToRefs(shopcar);
const addcart = async (a) => {
  let data = await addshopcar({
    shop_id: a._id,
    user_id: user_id.value,
    
  });
  shopcarlist.value = data.data;
};

function nextStep() {
  active.value = active.value + 1;
}

const current = ref<number>(0);
function handleClick(e) {
  console.log(e);
}
function onChange(e) {
  console.log(e);
}
const backpath = () => {
  uni.navigateBack({
    delta: 1,
  });
};

import { useMainStore } from '@/store/index';
const userinfo = useMainStore();
import { storeToRefs } from 'pinia';
const { list } = storeToRefs(userinfo);
const rexiaohaohuo_state = ref<string>('loading');
const rexiaohaohuo_num = ref<number>(2);
const rexiaohaohuo_max = ref<number>(list.value.filter(i=>i.discount!==0).length);
onReachBottom(() => {
  if (rexiaohaohuo_num.value === rexiaohaohuo_max.value) {
    rexiaohaohuo_state.value = 'error';
  } else if (rexiaohaohuo_num.value < rexiaohaohuo_max.value) {
    loadmore();
  } else if (rexiaohaohuo_num.value >= rexiaohaohuo_max.value) {
    rexiaohaohuo_state.value = 'finished';
  }
});
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad(() => {
  loadmore();
});
function loadmore() {
 let a= setInterval(() => {
    rexiaohaohuo_num.value = rexiaohaohuo_num.value + 2;
    rexiaohaohuo_state.value = 'loading';
    if (rexiaohaohuo_num.value >= rexiaohaohuo_max.value) {
      rexiaohaohuo_state.value = 'finished';
      clearInterval(a);
    }
  }, 2000);
}

</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 300rpx;
  margin: 0 auto;
  background-color: #f0f0f0;

  .one {
    width: 95%;
    height: 300rpx;
    margin: 0 auto;
    background-color: white;
    display: flex;
    justify-content: space-around;

    .img_src {
      width: 30%;
      height: 90%;

      margin: auto;
    }

    .shop_con {
      width: 65%;
      height: 90%;
      margin: auto;
    }
  }
}
.biaoti {
  width: 100%;
  height: 100rpx;
 color: black;
 
  margin: 10rpx auto;
}
</style>